@import "@wordpress/base-styles/mixins";

.dot-pager__page {
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
	@include reduce-motion( "transition" );
	opacity: 1;
	visibility: visible;

	&.is-prev,
	&.is-next {
		opacity: 0;
		visibility: hidden;
	}
}

.dot-pager__controls {
	margin: 0;
	margin-bottom: 16px;
	display: flex;
	justify-content: flex-start;

	li {
		display: inline-flex;
		margin: 0 4px;
		height: 18px;
		align-items: center;

		&:first-child {
			margin-left: 0;
		}
		&:last-child {
			margin-right: 0;
		}
	}

	.dot-pager__controls-spacer {
		flex: 1;
		justify-content: flex-end;
		text-align: right;
	}
}

button.dot-pager__control-button {
	background-color: var(--studio-white, #fff);
	border: 1px solid var(--studio-gray-5);
	border-radius: 50%;
	width: 32px;
	height: 32px;
	padding: 0;
	justify-content: center;
	align-items: center;
	margin-inline-start: 9px;

	&:hover {
		background-color: var(--studio-white, #fff);
	}
}

.dot-pager__control-prev,
.dot-pager__control-next,
.dot-pager__control-choose-page {
	cursor: pointer;

	&:disabled {
		cursor: default;
	}

	&:focus-visible {
		box-shadow: 0 0 0 2px var(--color-primary);
	}
}

.dot-pager__control-prev,
.dot-pager__control-next {
	display: inline-flex;
	background-color: transparent;
	color: var(--studio-gray-80);

	&[disabled] {
		color: var(--studio-gray-10);
	}
}

.dot-pager__control-choose-page {
	border-radius: 50%;
	width: 6px;
	height: 6px;
	background-color: var(--color-neutral-10);

	&:hover {
		background-color: var(--studio-gray-20);
	}

	&.dot-pager__control-current {
		background-color: var(--studio-gray-80);
	}
}

.dot-pager {
	&__button {
		margin-right: 10px;
	}
}
